<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/landCenter/orderManage">订单管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>重新编辑</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div style="margin: 24px;">
      <a-row>
        <a-col :span="24">
          <a-alert message="审核不通过原因：" :description="auditRemark" type="error" show-icon />
          <br />
        </a-col>
      </a-row>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <!-- 基本信息 -->
        <a-card>
          <div class="card-title hasContent">基本信息</div>
          <a-row :gutter="[0]">
            <a-col :span="12">
              <a-form-model-item label="客户名称" prop="custId">
                <a-select
                  show-search
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  :value="form.custName"
                  @search="handleCustNameChange"
                  @select="handleCustNameSelect"
                >
                  <a-select-option v-for="(d, i) in custIdList" :key="i">{{ d.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="是否加急" prop="isUrgent">
                <a-select v-model="form.isUrgent" class="selectWidth">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="goodsName" label="货名">
                <!-- <a-input v-model="form.goodsName" :max-length="20"/> -->
                <a-select
                  class="selectInputWidth"
                  show-search
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  v-model="form.goodsName"
                  @search="goodsListChange"
                >
                  <a-select-option key>请选择</a-select-option>
                  <a-select-option v-for="d in goodsList" :key="d.name">{{ d.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item prop="settlementType" label="结算类型">
                <a-select
                  v-model="form.settlementType"
                  :disabled="form.settlementTypeOri===1"
                  class="selectWidth"
                >
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="箱型" prop="containerTypeId">
                <a-select v-model="form.containerTypeId">
                  <a-select-option key>请选择</a-select-option>
                  <a-select-option v-for="item in containers" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="发票">
                <a-input-group compact>
                  <a-select
                    v-model="form.invoiceType"
                    @change="taxrateOptionsChange"
                    style="width: 60%"
                  >
                    <a-select-option key>不开票</a-select-option>
                    <a-select-option v-for="v in InvoiceOptions" :key="v.key">{{v.title}}</a-select-option>
                  </a-select>
                  <a-select
                    v-show="form.invoiceType!==''"
                    v-model="form.taxRate"
                    style="width: 40%"
                  >
                    <a-select-option v-for="v in TaxrateOptionsComputed" :key="v.key">{{v.title}}</a-select-option>
                  </a-select>
                </a-input-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" class="busenPic">
              <a-form-model-item prop="containerNum" label="箱量">
                <a-input-number
                  v-model="form.containerNum"
                  :precision="0"
                  :min="0"
                  :max="999"
                  style="width: 100%"
                />
              </a-form-model-item>
              <a-col :offset="6">
                <a-form-model-item prop="containerList">
                  <a v-show="completeBoxInfo" @click="completeBox">填写箱号，封号</a>
                </a-form-model-item>
              </a-col>
            </a-col>
            <a-col :span="12" class="busenPic">
              <a-form-model-item label="海船公司">
                <a-select
                  show-search
                  v-model="form.seagoingShipId"
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  @search="handleSeagoingShipChange"
                >
                  <a-select-option v-for="d in seagoingShipLikeData" :key="d.id">{{d.name}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>

        <!-- 订单信息 -->
        <a-card>
          <div class="card-title hasContent">订单信息</div>
          <a-row :gutter="[0]">
            <a-col :span="12">
              <a-form-model-item label="订单类型" prop="orderType">
                <a-select v-model="form.orderType" @change="onChangeOrderType" class="selectWidth">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option v-for="v in OrderOptions" :key="v.key">{{v.title}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="运单号">
                <a-input v-model="form.seagoingShipOrderCode" :max-length="20" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="起运港" prop="startPortId">
                <a-select
                  show-search
                  v-model="form.startPortId"
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  @search="value => handlePortNameChange(value, 1)"
                >
                  <a-select-option v-for="d in portList1" :key="d.id">{{ d.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="目的港" prop="endPortId">
                <a-select
                  show-search
                  v-model="form.endPortId"
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  @search="value => handlePortNameChange(value, 2)"
                >
                  <a-select-option v-for="d in portList2" :key="d.id">{{ d.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="驳船船名">
                <a-input v-model="form.shipName" :max-length="20" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="驳船航次">
                <a-input v-model="form.shipVoyage" :max-length="20" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="海船船名">
                <a-input v-model="form.seagoingShipName" :max-length="20" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="海船航次">
                <a-input v-model="form.seagoingShipVoyage" :max-length="20" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>

        <!-- 运输信息 -->
        <a-card>
          <div class="card-title hasContent">运输信息</div>
          <a-row>
            <a-col :span="24">
              <a-form-model-item :wrapperCol="{span:22 , offset: 1 }">
                <p>
                  门点信息：
                  <a-button type="primary" @click="loadingGate">新增门点</a-button>
                </p>
                <a-table
                  :columns="columns"
                  :data-source="tableData"
                  :pagination="false"
                  size="small"
                >
                  <template slot="opt" slot-scope="text, record, index">
                    <a @click="editIt(index)">编辑</a>
                    <a @click="deleteIt(index)">删除</a>
                  </template>
                </a-table>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-col :span="14">
                <a-form-model-item label="要求送达时间" prop="requiredArriveTime">
                  <a-date-picker
                    :value="requiredArriveTimeObj"
                    @change="requiredArriveTimeChange"
                    format="YYYY-MM-DD HH:mm"
                    :show-time="{ format: 'HH:mm' }"
                  />
                </a-form-model-item>
              </a-col>
            </a-col>
            <a-col :span="24">
              <a-col :span="14">
                <a-form-model-item label="备注">
                  <a-textarea :rows="4" v-model="form.sellerRemark" />
                </a-form-model-item>
              </a-col>
            </a-col>
          </a-row>
        </a-card>

        <!-- 费用信息 -->
        <a-card>
          <div class="card-title hasContent">费用信息</div>
          <a-row>
            <a-col :span="24">
              <a-col :span="14">
                <p class="fey_news">
                  <img :src="ys" /> 应收
                </p>
                <a-form-model-item label="应收客户（元/箱）" prop="receivableCustAmount">
                  <a-input-group compact>
                    <a-input-number
                      :precision="2"
                      :min="0"
                      v-model="form.receivableCustAmount"
                      @blur="() => {this.$refs.ruleForm.validateField('receivableCustAmount')}"
                      style="width: 200px"
                    ></a-input-number>
                    <a-select class="selectWidth" v-model="form.receivableCustCurrency">
                      <a-select-option value="CNY">CNY</a-select-option>
                      <a-select-option value="USD">USD</a-select-option>
                    </a-select>
                  </a-input-group>
                </a-form-model-item>
              </a-col>
            </a-col>
            <a-col :span="24">
              <a-col :span="14">
                <p class="fey_news">
                  <img :src="yf" /> 应付
                </p>
                <a-form-model-item label="保险费(元/箱)">
                  <a-button
                    @click="openInsuranceFee"
                    style="min-width: 160px; text-align: left;"
                  >{{form.payableInsuranceAmount}}</a-button>
                </a-form-model-item>
              </a-col>
            </a-col>
          </a-row>
        </a-card>

        <a-card>
          <div class="card-title hasContent">合同信息</div>
          <a-row>
            <a-col :span="24" class="busenPic">
              <a-form-model-item prop="contractPics" :wrapperCol="{span:24}">
                <ud-upload @uploadFile="picturesUpload" :optList="contractPicsArr" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </div>
    <div class="creat_button">
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <a-button
          type="primary"
          @click="save"
          :saveLoading="saveLoading"
          style="margin-left: 20px; float: right; margin-top:12px;"
        >提交</a-button>
      </a-form-model-item>
    </div>

    <!-- 保险费modal -->
    <a-modal
      :visible="payableVisible"
      title="保险费"
      :destroyOnClose="true"
      @ok="handleOk2"
      @cancel="handleCancel2"
    >
      <a-row>
        <a-col :span="24">
          <a-form-model
            ref="ruleForm2"
            :model="insuranceModalForm"
            :label-col="{span: 8}"
            :wrapper-col="{span: 14}"
          >
            <a-form-model-item label="货值（元/箱）">
              <a-input-number
                v-model="insuranceModalForm.goodsValue"
                @change="onChangeGoodsValue"
                :precision="2"
                :min="0.01"
                style="width: 100%"
              ></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="选择保险公司">
              <a-select
                v-model="insuranceModalForm.payableInsuranceId"
                @change="onChangeInsuranceId"
                class="selectWidth"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option v-for="v in custInsuranceLikeData" :key="v.custId">{{v.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              label="保险费率"
              style="margin: 0;"
            >{{insuranceModalForm.payableInsuranceRate || '--'}}</a-form-model-item>
            <a-form-model-item
              label="保险金额（元/箱）"
              style="margin: 0;"
            >{{insuranceModalForm.payableInsuranceAmount || '--'}}</a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>

    <loadingOrNotPortAndGate
      :visible="loadingVisible"
      :data="loadingGateData"
      :hasPort="hasPort"
      @closeIt="loadingClose"
    />

    <boxInfo
      :visible="boxVisible"
      :size="form.containerNum || 0"
      :data="boxData"
      @setVisible="setBoxData"
    />
  </div>
</template>

<script>
import { mixin } from '@/common/settlement2'
import {
  InvoiceOptions,
  TaxrateOptions,
  OrderOptions
} from '../options'
import debounce from 'lodash/debounce'
import moment from 'moment'
import UpLoad from '@/components/UpLoad'
import loadingOrNotPortAndGate from './loadingOrNotPortAndGateModal'
import boxInfo from '../boxInfoModal'
import {
  queryCustNameList,
  queryContainerTypeList,
  queryPortNameList
} from '@/api'
import {
  queryTruckNumberDown,
  queryCustInsuranceDown,
  updateOrderInfoJiate,
  queryJiateOrderAuditDetail,
  queryGoodsData
} from '@/api/landCenter'
import ys from '@@/images/ys.png'
import yf from '@@/images/yf.png'

const fomrMessage = `必填项不能为空`

export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    this.handleCustNameChange = debounce(this.handleCustNameChange, 800)
    this.handleSeagoingShipChange = debounce(
      this.handleSeagoingShipChange,
      800
    )
    this.handlePortNameChange = debounce(this.handlePortNameChange, 800)
    this.goodsListChange = debounce(this.goodsListChange, 800)
    const columns = [
      {
        title: '港口/门点地址',
        dataIndex: 'addressType',
        customRender: (text, record) => {
          if (text === 1) {
            // 港口
            return (
              <div>
                {record.portName} <span class="gangIcon">港</span>
              </div>
            )
          } else {
            return `${record.province}${record.city}${record.area}${record.address}`
          }
        }
      },
      { title: '联系人', dataIndex: 'linkMan' },
      { title: '联系人电话号码', dataIndex: 'linkManPhone' },
      {
        title: '类型',
        dataIndex: 'opeType',
        customRender: (text, record) => {
          return text === 1
            ? '装货'
            : text === 2
              ? '卸货'
              : text === 3
                ? '提箱'
                : '空车'
        }
      },
      { title: '备注', dataIndex: 'remark', ellipsis: true },
      { title: '操作', scopedSlots: { customRender: 'opt' }, width: '100px' }
    ]

    const containerListValidator = (rule, value, callback) => {
      let t = this.form.orderType
      if (t) {
        if (~t.indexOf('_IMPORTS')) {
          // 进口订单，箱号、封号、持箱人为必填项
          let number = this.form.containerNum
          const list = this.form.containerList
          if (
            number !== list.length ||
            list.filter(
              v => !v.containerNo || !v.containerSealNo || !v.holderName
            ).length > 0
          ) {
            return callback(new Error('进口订单，箱号、封号、持箱人为必填项'))
          }
        }
      }
      callback()
    }

    return {
      InvoiceOptions,
      TaxrateOptionsComputed: [],
      OrderOptions,
      ys,
      yf,
      hasPort: false,
      completeBoxInfo: false, // 选择订单类型后显示
      custIdList: [], // 客户搜索型输入
      containers: [],
      seagoingShipLikeData: [], // 客户搜索型输入
      portList1: [], // 起运港口搜索型输入
      portList2: [], // 目的港口搜索型输入
      shipList: [], // 船名搜索型输入
      shipVoyageList: [], // 航次搜索型输入
      loadingVisible: false,
      boxVisible: false,
      columns,
      tableData: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      truckNumberLikeData: [],
      form: {
        custId: '', // 客户id
        custIdName: '',
        sellerId: '', // 销售id
        goodsName: '', // 货名
        goodsValue: '', // 货值
        containerTypeId: '', // 箱型
        containerNum: 0, // 箱量
        settlementType: '', // 1票结，2月结
        settlementTypeOri: '',
        invoiceType: '', // 发票类型：1增值税专用发票，2增值税普通发票
        taxRate: '', // 税率
        seagoingShipId: '', // 海船公司id
        orderType: '',
        seagoingShipOrderCode: '', // 运单号
        startPortId: '', // 起运港id
        endPortId: '', // 目的港id
        shipName: '', // 驳船船名
        shipVoyage: '', // 驳船航次
        seagoingShipName: '', // 海船船名
        seagoingShipVoyage: '', // 海船航次
        requiredArriveTime: null, // 要求送达时间
        sellerRemark: '', // 销售备注
        contractPics: '', // 合同图片
        receivableCustAmount: '', // 应收客户金额
        receivableCustCurrency: 'CNY', // 应收客户币种
        payableInsuranceId: '', // 应付保险公司id
        payableInsuranceRate: '', // 应付保险公司费率
        payableInsuranceAmount: '', // 应付保险公司金额
        isUrgent: '', // 陆运是否加急：1是，0否
        addressList: [],
        containerList: []
      },
      auditRemark: '',
      loadingGateData: null,
      addressInfo: {
        opeType: '', // 操作类型：1装货，2卸货，3提箱
        addressType: '', // 门点类型：1港口，2门点
        portId: '', // 港口id
        province: '', // 省
        city: '', // 市
        area: '', // 区
        address: '', // 详细地址
        linkMan: '', // 联系人
        linkManPhone: '', // 联系人手机号
        remark: '' // 备注
      },
      containerInfo: {
        containerNo: '', // 箱号
        containerSealNo: '', // 封号
        holderName: '', // 持箱人
        sort: '' // 排序
      },
      boxData: [],
      rules: {
        custId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        goodsName: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        containerTypeId: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        containerNum: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        settlementType: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        isUrgent: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        orderType: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        requiredArriveTime: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        receivableCustAmount: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        containerList: [{ validator: containerListValidator }]
      },
      // 保险费modal
      custInsuranceLikeData: [],
      insuranceModalForm: {},
      payableVisible: false,
      saveLoading: false,
      rules2: {
        goodsValue: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        payableInsuranceId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ]
      },
      goodsList: []
    }
  },
  components: {
    'ud-upload': UpLoad,
    loadingOrNotPortAndGate,
    boxInfo
  },
  computed: {
    requiredArriveTimeObj () {
      return moment(this.form.requiredArriveTime)
    },
    contractPicsArr () {
      return this.form.contractPics ? this.form.contractPics.split(',') : []
    },
    payableInsuranceAmountComputed () {
      return this.insuranceModalForm.payableInsuranceRate >= 0
        ? this.insuranceModalForm.payableInsuranceRate *
        this.insuranceModalForm.goodsValue
        : ''
    }
  },
  created () {
    queryContainerTypeList({ status: 1 }).then(res => {
      this.containers = res.data
    })
  },
  methods: {
    goodsListRequest (e) {
      queryGoodsData(e).then(res => {
        // console.log(res.data)
        this.goodsList = res.data.list
      })
    },
    goodsListChange (e) {
      this.goodsListRequest({
        pageSize: 0,
        name: e,
        status: 1
      })
    },
    handleCustNameChange (nameLike) {
      // 客户
      if (nameLike) {
        queryCustNameList({
          nameLike,
          belongCompany: 'JIA_TE',
          custTypeLike: 'CUSTOMER',
          status: 1
        }).then(rsp => {
          this.custIdList = rsp.data
        })
      } else {
        this.custIdList = []
      }
    },
    handleCustNameSelect (index) {
      // 客户选择
      this.form.custId = this.custIdList[index].id
      this.form.custName = this.custIdList[index].name
      this.form.settlementType = this.custIdList[index].settlementType
      this.form.settlementTypeOri = this.custIdList[index].settlementType
    },
    taxrateOptionsChange () {
      if (this.form.invoiceType === 1) {
        this.form.taxRate = 6
        this.TaxrateOptionsComputed = TaxrateOptions.filter((v, i) => i !== 0)
      } else if (this.form.invoiceType === 2) {
        this.form.taxRate = 0
        this.TaxrateOptionsComputed = [...TaxrateOptions]
      } else {
        this.form.taxRate = ''
      }
    },
    handleSeagoingShipChange (nameLike) {
      // 应付结算对象
      if (nameLike) {
        queryCustNameList({
          nameLike,
          belongCompany: 'JIA_TE',
          custTypeLike: 'SUPPLIER',
          status: 1,
          isPayable: 1
        }).then(rsp => {
          this.seagoingShipLikeData = rsp.data
        })
      } else {
        this.seagoingShipLikeData = []
      }
    },
    onChangeOrderType (value) {
      this.$refs.ruleForm.clearValidate(['startPortId', 'endPortId'])
      if (!value) {
        this.completeBoxInfo = false
        this.rules['startPortId'] = null
        this.rules['endPortId'] = null
      } else if (~value.indexOf('_EXPORTS')) {
        // 出口订单：起运港为必填项，目的港为非必填项
        this.completeBoxInfo = false
        this.form.containerList = this.form.containerList.map((v, i) => {
          return {
            sort: i + 1,
            holderName: '',
            containerNo: '',
            containerSealNo: ''
          }
        })
        this.rules['startPortId'] = [
          {
            required: true,
            message: '出口订单：起运港为必填项',
            trigger: ['blur', 'change']
          }
        ]
        this.rules['endPortId'] = null
      } else if (~value.indexOf('_IMPORTS')) {
        // 进口订单：起运港为非必填项，目的港为必填项
        this.completeBoxInfo = true
        this.rules['startPortId'] = null
        this.rules['endPortId'] = [
          {
            required: true,
            message: '进口订单：目的港为必填项',
            trigger: ['blur', 'change']
          }
        ]
      } else {
        // 纯陆运订单：起运港和目的港均为非必填项
        this.completeBoxInfo = true
        this.rules['startPortId'] = null
        this.rules['endPortId'] = null
      }
    },
    handlePortNameChange (nameLike, i) {
      // 起运1 目的2港口对象
      if (nameLike) {
        queryPortNameList({
          nameLike,
          status: 1
        }).then(res => {
          this[`portList${i}`] = res.data
        })
      } else {
        this[`portList${i}`] = []
      }
    },
    loadingGate () {
      this.hasPort = !!(this.form.addressList && this.form.addressList.filter(v => v.addressType === 1)[0])
      this.loadingGateData = null
      this.loadingVisible = true
    },
    loadingClose (data) {
      if (data) {
        if (data.key === -1) {
          data.key = -Math.floor(Math.random() * 10000)
          this.tableData.push(data)
        } else {
          this.tableData = this.tableData.map(v => {
            if (v.key === data.key) {
              return data
            } else {
              return v
            }
          })
        }

        this.form.addressList = [...this.tableData] // 本地缓存地址
      }
      this.loadingVisible = false
    },
    editIt (index) {
      this.hasPort = !!(this.form.addressList && this.form.addressList.filter(v => v.addressType === 1)[0])
      this.loadingGateData = this.tableData[index]
      this.loadingVisible = true
    },
    deleteIt (index) {
      this.tableData.splice(index, 1)
      this.form.addressList = [...this.tableData]
    },
    requiredArriveTimeChange (date, dataStr) {
      this.form.requiredArriveTime = dataStr
    },
    picturesUpload (val) {
      this.form.contractPics = val
    },
    onChangeSignTime (date, dateString) {
      this.form.signTime = dateString
    },
    onChangeBeginTime (date, dateString) {
      this.form.beginTime = dateString
    },
    onChangeEndTime (date, dateString) {
      this.form.endTime = dateString
    },
    queryTruckNumberDown (truckNumber) {
      if (truckNumber) {
        queryTruckNumberDown({
          truckNumber,
          isSelfOperation: 1,
          status: 1
        }).then(rsp => {
          this.truckNumberLikeData = rsp.data
        })
      } else {
        this.truckNumberLikeData = []
      }
    },
    completeBox () {
      this.boxVisible = true
    },
    setBoxData (value) {
      if (value) {
        this.boxData = value
        this.form.containerList = [...value]
      }
      this.boxVisible = false
    },
    // 保险费信息
    queryCustInsuranceDown () {
      queryCustInsuranceDown({ belongCompany: 'JIA_TE' }).then(rsp => {
        this.custInsuranceLikeData = rsp.data
      })
    },
    onChangeGoodsValue () {
      this.insuranceModalForm.payableInsuranceAmount = this.payableInsuranceAmountComputed
    },
    onChangeInsuranceId () {
      const target = this.custInsuranceLikeData.filter(
        v => v.custId === this.insuranceModalForm.payableInsuranceId
      )[0]
      if (target) {
        this.insuranceModalForm.payableInsuranceRate = target.insuranceRate
        this.insuranceModalForm.payableInsuranceAmount = this.payableInsuranceAmountComputed
      } else {
        this.insuranceModalForm.payableInsuranceRate = ''
        this.insuranceModalForm.payableInsuranceAmount = this.payableInsuranceAmountComputed
      }
    },
    openInsuranceFee () {
      this.queryCustInsuranceDown()
      this.insuranceModalForm = { ...this.form }
      this.payableVisible = true
    },
    handleOk2 () {
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          Object.assign(this.form, this.insuranceModalForm)
          this.payableVisible = false
        }
      })
    },
    handleCancel2 () {
      this.payableVisible = false
    },
    save () {
      this.saveLoading = true
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.form.addressList.length === 0) {
            this.$message.error('运输信息为必填项')
            return false
          }

          let n = this.form.containerNum
          if (n > this.form.containerList.length) {
            for (let i = 0; i < n; i++) {
              if (this.form.containerList.length <= i) {
                this.form.containerList.push({
                  sort: i + 1,
                  holderName: '',
                  containerNo: '',
                  containerSealNo: ''
                })
              }
            }
          } else {
            this.form.containerList.splice(
              n,
              this.form.containerList.length - n
            )
          }
          updateOrderInfoJiate(this.form)
            .then(rsp => {
              this.$message.success('提交成功！')
              this.saveLoading = false
              this.$router.push('/landCenter/orderAudit')
            })
            .catch(rs => {
              this.saveLoading = false
            })
        }
      })
    }
  },
  mounted () {
    this.goodsListRequest({
      pageSize: 0,
      name: '',
      status: 1
    })
    this.$nextTick(() => {
      queryJiateOrderAuditDetail({ orderJiateId: this.id }).then(rsp => {
        this.form = rsp.data
        this.auditRemark = rsp.data.auditRemark
        this.form.settlementTypeOri = rsp.data.settlementType
        this.taxrateOptionsChange()
        this.tableData = rsp.data.addressList
        this.boxData = rsp.data.containerList

        this.onChangeOrderType(rsp.data.orderType)
      })
    })
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 24px;
  border: none;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
  .ant-col-12 {
    padding-right: 50px;
  }
}
#the_module,
.ant-layout {
  margin-bottom: 55px;
}
.ant-form-item-control {
  width: 100%;
}
.fey_news {
  margin-left: 6%;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}
.fey_news img {
  margin-right: 5px;
}
</style>
